import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { Form } from 'antd'
import { Line, Cell } from '@components/ApprovePre/Approve'
import style from './FeeList.module.less'
import Text from '@components/Text'
import ModifyFee from './ModifyFee'
import { computeFeeWithLog } from './context'
const { Item } = Form
// 新费用
function NewFee ({ name, originClaim, claim, formRef }) {
  const [visible, setVisible] = useState(false)
  const [modifyInitData, setModifyInitData] = useState({})
  return (
    <Line>
      <ModifyFee visible={visible} initData={modifyInitData} hide={() => { setVisible(false); setModifyInitData({}) }} onChange={d => computeFeeWithLog(d, name, formRef, originClaim, () => setVisible(false))} />
      <Cell style={{ width: '65%' }}>
        <Item labelCol={{ flex: '100px' }} label='仲裁费'>
          <div className={style['compute-input']}>
            <span>受理费 </span>
            <Item noStyle name={[name, 'fee_acceptance']}>
              <Text />
            </Item>
            <span> + </span>
            <span>处理费 </span>
            <Item noStyle name={[name, 'fee_processing']}>
              <Text />
            </Item>
            <span> = </span>
            <Item noStyle name={[name, 'fee']}>
              <Text />
            </Item>
            <span type='button' className={style['modify-btn']} onClick={() => showModify(formRef, name, setModifyInitData, setVisible)}>修改</span>
          </div>
        </Item>
      </Cell>
    </Line>
  )
}

// 退费
function Refend ({ name, originClaim, claim, formRef }) {
  const [visible, setVisible] = useState(false)
  const [modifyInitData, setModifyInitData] = useState({})
  return (
    <>
      <ModifyFee visible={visible} initData={modifyInitData} hide={() => { setVisible(false); setModifyInitData({}) }} onChange={d => computeFeeWithLog(d, name, formRef, originClaim, () => setVisible(false))} />
      <Line>
        <Item noStyle name={[name, 'fee']}><span /></Item>
        <Cell style={{ width: '65%' }}>
          <Item labelCol={{ flex: '120px' }} label='补/退受理费'>
            <div className={style['compute-input']}>
              <span>新受理费 </span>
              <Item noStyle name={[name, 'fee_acceptance']}>
                <Text />
              </Item>
              <span> - </span>
              <span>原受理费 </span>
              <span>{originClaim.fee_acceptance}</span>
              <span> = </span>
              <Item noStyle name={[name, 'fee_acceptance_amend']}>
                <Text />
              </Item>
            </div>
          </Item>
        </Cell>
      </Line>
      <Line>
        <Cell style={{ width: '65%' }}>
          <Item labelCol={{ flex: '120px' }} label='补/退处理费'>
            <div className={style['compute-input']}>
              <span>新处理费 </span>
              <Item noStyle name={[name, 'fee_processing']}>
                <Text />
              </Item>
              <span> - </span>
              <span>原处理费 </span>
              <span>{originClaim.fee_processing}</span>
              <span> = </span>
              <Item noStyle name={[name, 'fee_processing_amend']}>
                <Text />
              </Item>
            </div>
          </Item>
        </Cell>
      </Line>
      <Line>
        <Cell style={{ width: '65%' }}>
          <Item labelCol={{ flex: '120px' }} label='补/退仲裁费'>
            <div className={style['compute-input']}>
              <Item noStyle name={[name, 'fee_amend']}>
                <Text />
              </Item>
              <span type='button' className={style['modify-btn']} onClick={() => showModify(formRef, name, setModifyInitData, setVisible)}>修改</span>
            </div>
          </Item>
        </Cell>
      </Line>
    </>
  )
}

// 显示修改框
function showModify (formRef, name, setModifyInitData, setVisible) {
  const c = formRef.current
  const claim = c.getFieldsValue([name])[name]
  setModifyInitData({
    fee_acceptance: claim.fee_acceptance,
    fee_processing: claim.fee_processing,
    fee: claim.fee,
    log: claim.log
  })
  setVisible(true)
}

function Main ({ claim, originClaim, name, formRef }) {
  return (
    <div>
      <Item noStyle name={[name, 'dispute_amount']}><span /></Item>
      <Item noStyle name={[name, 'dispute_amount_amend']}><span /></Item>
      {originClaim ? (
        <Refend name={name} originClaim={originClaim} claim={claim} formRef={formRef} />
      ) : (
        <NewFee name={name} originClaim={originClaim} claim={claim} formRef={formRef} />
      )}
      <Item noStyle name={[name, 'log']}><span /></Item>
    </div>
  )
}

Main.propTypes = {
  claim: PropTypes.object,
  originClaim: PropTypes.object,
  name: PropTypes.string,
  formRef: PropTypes.object
}
Main.defaultProps = {
  claim: undefined,
  originClaim: undefined,
  name: '',
  formRef: null
}

export default Main
